<!-- 课程管理 -->
<template>
    <div class="app-container">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="普通课程配置" name="first">
                <el-form :inline="true" size="small">
                    <el-form-item label="课程编号">
                        <el-input v-model="modelId" placeholder="请输入课程编号" size="small" />
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-input v-model="modelName" placeholder="请输入课程名称" size="small" />
                    </el-form-item>
                    <el-button icon="el-icon-search" type="primary" size="small" @click
                        >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
                    <el-button icon="el-icon-refresh" size="small" @click>导入</el-button>
                    <el-button icon="el-icon-refresh" size="small" @click>导出</el-button>
                </el-form>
                <router-link to="/university/leMode">
                    <el-button type="primary" icon="el-icon-document-copy" size="small"
                        >课程分类管理</el-button
                    >
                </router-link>

                <router-link to="/university/exlesson">
                    <el-button
                        type="primary"
                        icon="el-icon-menu"
                        size="small"
                        style="margin-left: 15px"
                        >专栏管理</el-button
                    >
                </router-link>
                <el-button
                    icon="el-icon-edit"
                    style="margin-left: 15px"
                    type="warning"
                    size="small"
                    @click="edit"
                    >新增</el-button
                >
                <el-button icon="el-icon-delete" type="danger" size="small" @click>删除</el-button>
                <el-button class="ref-btn" icon="el-icon-refresh" circle @click></el-button>

                <div style="margin-top: 20px">
                    <el-table :data="tableData" border stripe>
                        <el-table-column type="selection" align="center" width="60" />
                        <template v-for="(col, index) in columns">
                            <el-table-column
                                :prop="col.data"
                                :key="col.id"
                                :label="col.label"
                                align="center"
                                :width="col.width"
                            />
                        </template>
                        <el-table-column label="操作" align="center" width="170">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="edit(scope.$index, scope.row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    style="color: #f56c6c"
                                    @click="deleteCate(scope.$index, scope.row)"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page">
                    <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page.sync="pageData.page"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="pageData.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background
                    />
                </div>
            </el-tab-pane>
            <el-tab-pane label="专栏课程配置" name="second">
                <el-form :inline="true" size="small">
                    <el-form-item label="课程编号">
                        <el-input
                            v-model="modelId"
                            placeholder="请输入课程编号"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="课程名称">
                        <el-input
                            v-model="modelName"
                            placeholder="请输入课程名称"
                            size="small"
                        ></el-input>
                    </el-form-item>
                    <el-button icon="el-icon-search" type="primary" size="small" @click
                        >搜索</el-button
                    >
                    <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
                    <el-button icon="el-icon-edit" type="warning" size="small" @click="edit2"
                        >新增</el-button
                    >
                    <el-button icon="el-icon-delete" type="danger" size="small" @click
                        >删除</el-button
                    >
                </el-form>
                <router-link to="/university/leMode">
                    <el-button type="primary" icon="el-icon-document-copy" size="small"
                        >课程分类管理</el-button
                    >
                </router-link>
                <router-link to="/university/exlesson">
                    <el-button
                        type="primary"
                        icon="el-icon-menu"
                        size="small"
                        style="margin-left: 15px"
                        >专栏管理</el-button
                    >
                </router-link>
                <div style="margin-top: 20px">
                    <el-table :data="tableData" border stripe>
                        <el-table-column type="selection" align="center" width="60" />
                        <template v-for="(col, index) in columns2">
                            <el-table-column
                                :prop="col.data"
                                :key="col.id"
                                :label="col.label"
                                align="center"
                                :width="col.width"
                            ></el-table-column>
                        </template>
                        <el-table-column label="操作" align="center" width="170">
                            <template slot-scope="scope">
                                <el-button
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="edit2(scope.$index, scope.row)"
                                    >编辑</el-button
                                >
                                <el-button
                                    type="text"
                                    icon="el-icon-delete"
                                    style="color: #f56c6c"
                                    @click="deleteCate(scope.$index, scope.row)"
                                    >删除</el-button
                                >
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="page">
                    <el-pagination
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :current-page.sync="pageData.page"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="pageData.limit"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background
                    />
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="新增" :visible.sync="showEdit" width="40%" @close="">
            <el-form
                :model="form"
                ref="form"
                :rules="rules"
                label-width="180px"
                class="dform"
                :inline="false"
                size="normal"
            >
                <el-form-item label="课程编号">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="课程封面">
                    <el-upload
                        action
                        :file="form.cover"
                        :before-upload="beforeCoverUpload"
                        list-type="picture-card"
                        accept="image/*"
                    >
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传不超过 xxxMB 的image/*文件
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="是否推荐至首页">
                    <el-switch v-model="form.inHome" :active-value="true" :inactive-value="false" />
                </el-form-item>
                <el-form-item label="是否推荐至课程首页">
                    <el-switch
                        v-model="form.inLeHome"
                        :active-value="true"
                        :inactive-value="false"
                    />
                </el-form-item>
                <el-form-item label="所属分类">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>

                <el-form-item label="专家名称">
                    <el-input v-model="form.expert"></el-input>
                </el-form-item>
                <el-form-item label="观看次数">
                    <el-input v-model="form.count"></el-input>
                </el-form-item>
                <el-form-item label="收费规则">
                     <el-select v-model="form.rule" clearable filterable >
                        <el-option label="免费" value="free" />
                        <el-option label="会员免费" value="vipFree" />
                        <el-option label="会员折扣" value="vipPrice" />
                        <el-option label="无优惠" value="no-discount" />
                    </el-select>

                    <!-- <el-input v-model="form.rulePrice" style="width:100px;margin-left:20px"></el-input> -->
                    
                </el-form-item>
                <el-form-item label="课程视频">
                    <el-upload
                        action
                        :file="form.video"
                        :before-upload="beforeCoverUpload"
                        list-type="picture-card"
                        accept="video/*"
                    >
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传不超过 xxxMB 的video/*文件
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="选择习题分类">
                    <el-button type="text" size="default" @click="showMode=true">添加</el-button>
                </el-form-item>
                <el-dialog title="选择习题分类" :visible.sync="showMode" width="40%" append-to-body @close="">
                    <el-transfer v-model="form.modes" :data="modeData" target-order="original" filterable @change=""
                        :format="{noChecked: '${total}',hasChecked: '${checked}/${total}'}">
                    </el-transfer>
                    <span slot="footer">
                        <el-button @click="showMode = false">取消</el-button>
                        <el-button type="primary" @click="">确定</el-button>
                    </span>
                </el-dialog>
            </el-form>

            <span slot="footer">
                <el-button @click="showEdit = false">取消</el-button>
                <el-button type="primary" @click="">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="新增" :visible.sync="showEdit2" width="40%" @close="">
            <el-form
                :model="form"
                ref="form"
                :rules="rules"
                label-width="180px"
                class="dform"
                :inline="false"
                size="normal"
            >
                <el-form-item label="课程编号">
                    <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item label="课程名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="课程封面">
                    <el-upload
                        action
                        :file="form.cover"
                        :before-upload="beforeCoverUpload"
                        list-type="picture-card"
                        accept="image/*"
                    >
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传不超过 xxxMB 的image/*文件
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="是否推荐至专栏详情页">
                    <el-switch v-model="form.inHome" :active-value="true" :inactive-value="false" />
                </el-form-item>
                <el-form-item label="所属专栏">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="所属分类">
                    <el-input v-model="form.type"></el-input>
                </el-form-item>
                <el-form-item label="专家名称">
                    <el-input v-model="form.expert"></el-input>
                </el-form-item>
                <el-form-item label="观看次数">
                    <el-input v-model="form.count"></el-input>
                </el-form-item>
                <el-form-item label="收费规则">
                    <el-input v-model="form.rule"></el-input>
                </el-form-item>
                <el-form-item label="课程视频">
                    <el-upload
                        action
                        :file="form.video"
                        :before-upload="beforeCoverUpload"
                        list-type="picture-card"
                        accept="video/*"
                    >
                        <i class="el-icon-plus"></i>
                        <div slot="tip" class="el-upload__tip">
                            只能上传不超过 xxxMB 的video/*文件
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>

            <span slot="footer">
                <el-button @click="showEdit2 = false">取消</el-button>
                <el-button type="primary" @click="">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data () {
        return {
            activeName: "first",
            modelId: "",
            modelName: "",
            msgApi: "",
            createData: {
            },
            modeData:[
                {label:'1',key:'1'},
                {label:'2',key:'2'},
                {label:'3',key:'3'},
                {label:'4',key:'4'},
                {label:'5',key:'5'},
            ],
            showMode:false,
            showEdit: false,
            showEdit2: false,
            rules: {},
            i: "", //cate_id
            updateData: {
            },
            form: {
                modes:[]
            },
            pageData: {
                page: 1,
                limit: 10
            },
            total: 10,
            tableData: [
                {
                    id: '1',
                    name: '1',
                    cover: '1',
                    inHome: '1',
                    inLeHome: '',
                    type: '',
                    expert: '',
                    count: '',
                    rule: '',
                    video: '',
                }, {
                    id: '2',
                    name: '1',
                    cover: '1',
                    inHome: '1',
                    inLeHome: '',
                    type: '',
                    expert: '',
                    count: '',
                    rule: '',
                    video: '',
                }, {
                    id: '3',
                    name: '1',
                    cover: '1',
                    inHome: '1',
                    inLeHome: '',
                    type: '',
                    expert: '',
                    count: '',
                    rule: '',
                    video: '',
                },
            ],
            columns: [
                { key: 0, label: `课程编号`, data: "id", width: 80 },
                { key: 1, label: `课程名称`, data: "name" },
                { key: 2, label: `课程封面`, data: "cover" },
                { key: 3, label: `是否推荐至首页`, data: "inHome" },
                { key: 4, label: `是否推荐至课程首页`, data: "inLeHome" },
                { key: 5, label: `所属分类`, data: "type" },
                { key: 6, label: `专家名称`, data: "expert" },
                { key: 7, label: `观看次数`, data: "count" },
                { key: 8, label: `收费规则`, data: "rule" },
                { key: 9, label: `课程视频`, data: "video" }
            ],
            columns2: [
                { key: 0, label: `课程编号`, data: "id", width: 80 },
                { key: 1, label: `课程名称`, data: "name" },
                { key: 2, label: `课程封面`, data: "cover" },
                { key: 3, label: `是否推荐至专栏详情页`, data: "inHome" },
                { key: 5, label: `所属分类`, data: "type" },
                { key: 5, label: `所属专栏`, data: "column" },
                { key: 6, label: `专家名称`, data: "expert" },
                { key: 7, label: `观看次数`, data: "count" },
                { key: 9, label: `课程视频`, data: "video" }
            ]
        };
    },
    created () {
        // this.getCategoryList();
    },
    methods: {

        add () { },
        edit (i) {
            this.showEdit = true;
            this.updateData = this.tableData[i];
        },
        edit2 (i) {
            this.showEdit2 = true;
            this.updateData = this.tableData[i];
        },
        detail (i) {
            console.log(i);
            this.i = i;
            this.showDetail = true;
        },
        beforeCoverUpload () { },

        sizeChange (a) {
            this.pageData.limit = a;
            this.getCategoryList();
        },
        currentChange (a) {
            this.pageData.page = a;
            this.getCategoryList();
        }
    }
};
</script>
<style>
.sok {
    color: #5cb87a;
    width: 60px;
    margin: 0 auto;
    border: 1px solid #5cb87a;
    background: #fff;
    border-radius: 5px;
}
.sfail {
    color: #f56c6c;
    width: 60px;
    margin: 0 auto;
    border: 1px solid #f56c6c;
    background: #fff;
    border-radius: 5px;
}
.btnBox {
    height: 130px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.btnBox .el-button {
    margin: 0;
}
.detailLog div {
    margin: 10px;
    color: #000;
    font-size: 16px;
}
.detailLog .dbox {
    display: flex;
    flex-wrap: wrap;
}
.detailLog .dbox > div {
    width: 46%;
    margin: 10px 0;
}
.dform .el-input {
    width: 220px;
    margin-left: 20px;
}
.dform .el-switch,
.dform .el-upload {
    margin-left: 20px;
}
</style>
